<template>
  <div class="listContainer">
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <div class="header">
      <div class="searchWrap">
        <el-input
          placeholder="输入订单号查询"
          prefix-icon="el-icon-search"
          v-model="keyword"
        >
        </el-input>
      </div>
      <el-button type="warning" round @click="getNewList">搜索</el-button>
    </div>
    <div
      class="listBody"
      v-infinite-scroll="loadList"
      infinite-scroll-distance="1"
      style="overflow: auto"
    >
      <el-checkbox-group v-model="checkboxValue">
        <div
          class="itemContainer"
          v-for="(item, index) in orderList"
          :key="item.id"
        >
          <div class="header">
            <div class="waybillCode">
              <span class="waybillTitle">订单号：</span>
              <span>{{ item.order_no }}</span>
            </div>
            <div
              :class="[
                {
                  'transportType-1':
                    item.waybill_product_type_name === '保温箱',
                },
                {
                  'transportType-2':
                    item.waybill_product_type_name === '常温零担',
                },
                {
                  'transportType-3':
                    item.waybill_product_type_name === '常温整车',
                },
                {
                  'transportType-4':
                    item.waybill_product_type_name === '冷链整车',
                },
                {
                  'transportType-5':
                    item.waybill_product_type_name === '冷链零担',
                },
                {
                  'transportType-6':
                    item.waybill_product_type_name === '干冰箱',
                },
                {
                  'transportType-7':
                    item.waybill_product_type_name !== '保温箱' &&
                    item.waybill_product_type_name !== '常温零担' &&
                    item.waybill_product_type_name !== '常温整车' &&
                    item.waybill_product_type_name !== '冷链整车' &&
                    item.waybill_product_type_name !== '冷链零担' &&
                    item.waybill_product_type_name !== '干冰箱',
                },
              ]"
            >
              {{ item.waybill_product_type_name }}
            </div>
          </div>
          <div class="itemBody">
            <div class="checkbox">
              <el-checkbox
                :label="item.id"
                @change="changeOrder($event, item)"
              ></el-checkbox>
            </div>
            <div class="rightInfo" @click="checkedOrder(item, index)">
              <div class="routerArea">
                <div class="cityWrap">
                  <div class="cityName">{{ item.sender_city }}</div>
                  <div class="customerName">{{ item.sender_name }}</div>
                </div>
                <div class="orient">
                  <div class="iconfont_orient">
                    <span
                      style="font-size: 100px"
                      class="iconfont icon-xiangyoujiaohuan"
                    ></span>
                  </div>
                  <div class="orderStatus">{{ item.status_name }}</div>
                </div>
                <div class="cityWrap">
                  <div class="cityName">{{ item.receiver_city }}</div>
                  <div class="customerName">{{ item.receiver_name }}</div>
                </div>
              </div>
              <div class="itemInfo">
                <div class="itemLine">
                  <div class="itemTitle">发货公司：</div>
                  <div class="itemContent">{{ item.sender_company }}</div>
                </div>
                <div class="itemLine">
                  <div class="itemTitle">收货公司：</div>
                  <div class="itemContent">{{ item.receiver_company }}</div>
                </div>
                <div class="itemLine">
                  <div class="itemTitle">下单时间：</div>
                  <div class="itemContent">
                    {{ item.create_time }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="footer">
      <div class="footerBtn" @click="submitFunc">
        <el-button type="warning" round>确定</el-button>
      </div>
    </div>
  </div>
</template>


<script>
import signString from "@/utils/sign";
import { reqOrderList } from "@/api/rate";
export default {
  name: "orderList",
  data() {
    return {
      keyword: "",
      checkboxValue: [],
      orderList: [],
      orderDetail: [],
      page: 1,
      page_size: 10,
      sender_id: "",
      customer_id: "",
    };
  },
  watch: {
    $route: {
      handler() {
        this.$nextTick(() => {
          this.sender_id = this.$route.query.sender_id;
          this.customer_id = this.$route.query.customer_id;
          this.getNewList();

          // if (this.$route.query.orderIds.length !== 0) {
          //   let arr = this.$route.query.orderIds;
          //   this.checkboxValue = arr.map((item) => item.id * 1);
          // } else {
          //   this.checkboxValue = [];
          // }

          this.checkboxValue =
            JSON.parse(localStorage.getItem("serve_rate")).order_ids || [];
        });
      },
      deep: true,
      immediate: true,
    },
    orderList: {
      handler() {
        this.checkboxValue.forEach((item, index) => {
          this.orderDetail = this.orderList.filter((x) => x.id === item);
        });
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    async getNewList() {
      this.page = 1;
      this.page_size = 10;
      let timestamp = (new Date().getTime() + "").slice(0, 10);
      let sign = signString({
        order_no: this.keyword,
        sender_id: this.sender_id,
        page: this.page,
        page_size: this.page_size,
        timestamp: timestamp,
      });
      let result = await reqOrderList({
        app_key: "9dae4a75d1b695b7c47ff0b36d3656d7",
        sign: sign,
        order_no: this.keyword,
        sender_id: this.sender_id * 1,
        page: this.page,
        page_size: this.page_size,
        timestamp: timestamp,
      });
      this.orderList = result.data.list || [];
    },
    async getList() {
      let timestamp = (new Date().getTime() + "").slice(0, 10);
      let sign = signString({
        order_no: this.keyword,
        sender_id: this.sender_id,
        page: this.page,
        page_size: this.page_size,
        timestamp: timestamp,
      });
      let result = await reqOrderList({
        app_key: "9dae4a75d1b695b7c47ff0b36d3656d7",
        sign: sign,
        order_no: this.keyword,
        sender_id: this.sender_id * 1,
        page: this.page,
        page_size: this.page_size,
        timestamp: timestamp,
      });
      if (result.data.list.length > 0) {
        this.orderList = this.orderList.concat(result.data.list);
      }
    },
    checkedOrder(piece) {
      let index2 = this.checkboxValue.findIndex((item) => item === piece.id);
      if (index2 !== -1) {
        this.checkboxValue.splice(index2, 1);
        this.orderDetail.splice(index2, 1);
      } else {
        this.checkboxValue.push(piece.id);
        this.orderDetail.push(piece);
      }
    },
    changeOrder(event, piece) {
      let index2 = this.checkboxValue.findIndex((item) => item === piece.id);
      this.$nextTick(() => {
        if (index2 === -1) {
          this.orderDetail.splice(index2, 1);
        } else {
          this.orderDetail.push(piece);
        }
      });
    },
    loadList() {
      this.page++;
      this.getList();
    },
    submitFunc() {
      let orderDetail = this.orderDetail;
      let sender_id = this.sender_id;
      let customer_id = this.customer_id;
      this.$router.push({
        name: "rateIndex", //如果要用params传参就要使用name而不是path
        params: {
          orderDetail,
        },
        query: {
          customer_id,
          sender_id,
        },
      });
    },
  },
};
</script>

<style scoped lang="less">
body {
  margin: 0 !important;
}
::v-deep .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 14px;
}

::v-deep .el-checkbox__inner {
  border-color: #f09937 !important;
  margin-left: -10px;
  margin-right: 10px;
  border-radius: 50%;
}

::v-deep .el-checkbox__input.is-checked {
  border-color: #f09937 !important;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background: #f09937 !important;
}

::v-deep .el-checkbox__label {
  display: none;
}

::v-deep .el-checkbox-group {
  font-size: 14px !important;
  display: block !important;
}

::v-deep .el-button {
  padding: 10px 15px !important;
  span {
    font-size: 16px;
  }
}

::v-deep .el-checkbox__inner {
  width: 20px !important;
  height: 20px !important;
}

::v-deep .el-checkbox__inner::after {
  left: 8px !important;
  height: 14px !important;
}

.listContainer {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    // padding-top: 20px;
    .searchWrap {
      padding: 5px 10px;
      flex: 1;
    }
  }

  .listBody {
    padding-top: 10px;
    background-color: #efefef;
    height: 87vh;
    margin-bottom: 70px;
    .itemContainer {
      border-radius: 10px;
      margin: 0 10px;
      margin-bottom: 10px;
      padding: 0px 15px;
      background-color: white;

      .header {
        padding: 10px 0;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .waybillCode {
          max-width: 250px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          .waybillTitle {
            color: #88909d;
          }
          .iconfont {
            margin-left: 10px;
          }
        }
        .transportType-1 {
          border: solid 2px #3274f6;
          border-radius: 5px;
          padding: 3px 10px;
          font-size: 14px;
          white-space: nowrap;
        }
        .transportType-2 {
          border: solid 2px #a487ff;
          border-radius: 5px;
          padding: 3px 10px;
          font-size: 14px;
          white-space: nowrap;
        }
        .transportType-3 {
          border: solid 2px #e162af;
          border-radius: 5px;
          padding: 3px 10px;
          font-size: 14px;
          white-space: nowrap;
        }
        .transportType-4 {
          border: solid 2px #ffd747;
          border-radius: 5px;
          padding: 3px 10px;
          font-size: 14px;
          white-space: nowrap;
        }
        .transportType-5 {
          border: solid 2px #68e1e3;
          border-radius: 5px;
          padding: 3px 10px;
          font-size: 14px;
          white-space: nowrap;
        }
        .transportType-6 {
          border: solid 2px #ffa080;
          border-radius: 5px;
          padding: 3px 10px;
          font-size: 14px;
          white-space: nowrap;
        }
        .transportType-7 {
          border: solid 2px #b8e986;
          border-radius: 5px;
          padding: 3px 10px;
          font-size: 14px;
          white-space: nowrap;
        }
      }
      .itemBody {
        display: flex;
        align-items: center;
        .rightInfo {
          // width: 100%;
          .routerArea {
            margin-right: 15px;
            padding: 10px 0;
            min-height: 70px;
            display: flex;
            justify-content: space-between;

            .cityWrap {
              text-align: center;
              flex: 1;

              .cityName {
                font-size: 16px;
                line-height: 22px;
                font-weight: bold;
                padding: 10px;
              }

              .customerName {
                color: #9f9da4;
                // white-space: nowrap;
              }
            }

            .orient {
              display: flex;
              flex-direction: column;
              margin-top: -10px;

              .iconfont_orient {
                transform: scaleY(0.4);
                color: #9f9f9f;
              }

              .orderStatus {
                margin: -40px auto;
                font-size: 12px;
              }
            }
          }
          .itemInfo {
            .itemLine {
              height: 30px;
              align-items: center;
              width: 350px;
              display: flex;
              align-items: flex-start;

              .itemTitle {
                width: 70px;
                color: #88909d;
              }

              .itemContent {
                width: 250px;
                word-wrap: break-word;
              }
            }
          }
        }
      }
    }
  }
  .footer {
    box-shadow: 0px -5px 10px -5px #e6e7ea; //水平偏移,垂直偏移,模糊距离,阴影的尺寸,阴影的颜色,将外部阴影 (outset) 改为内部阴影
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
    padding: 10px 0 10px;
    display: flex;
    justify-content: flex-end;
    background-color: #fff;

    .footerBtn {
      flex: 1;
      text-align: center;
      background-color: #e6a23c;
      color: #fff;
      // padding: 4px 20px;
      margin: -3px 10px;
      border-radius: 25px;
    }
  }
}
</style>